<template>
  <div class="allorder">
    <div class="order-tt">
      <span class="li " v-on:click="gotoAddress('/me/saleall')">全部</span>
      <span class="li active"  v-on:click="gotoAddress('/me/saleshenhe')">待审核</span>
      <span class="li" v-on:click="gotoAddress('/me/saleing')">售卖中</span>
      <span class="li" v-on:click="gotoAddress('/me/saleunpay')">未付款</span>
      <span class="li" v-on:click="gotoAddress('/me/saleover')">已成交</span>
    </div>

    <div class="shenhe-tt order-tt">
      <span class="li "  v-on:click="gotoAddress('/me/saleshenhe')">未审核</span>
      <span class="li" v-on:click="gotoAddress('/me/salewait')">待发货</span>
      <span class="li active" v-on:click="gotoAddress('/me/saledeliver')">已发货</span>
    </div>

    <div class="list" v-if="haveList">

      <div class="product-box" >

        <div class="product-li" v-for="item in orderList">
          <div class="list-tt clearfix">
            <div class="right" v-if="item.status == 1">售卖中</div>
            <div class="right" v-if="item.status == 2">待审核</div>
            <div class="right" v-if="item.status == 3">待发货</div>
            <div class="right" v-if="item.status == 4">未付款</div>
            <div class="right" v-if="item.status == 5">已成交</div>
            <div class="right" v-if="item.status == 6">己下架</div>
            <div class="right" v-if="item.status == 7">己发货</div>
          </div>
          <div class="product clearfix"  @click="gotoAddress('/shop/details/'+item.product_id)">
            <div class="fl">
              <div class="img">
                <img v-if="item.product.image==null" src="../../assets/default1.png" alt="">
                <img v-if="item.product.image!=null" :src="item.product.image" :onerror="logo" alt="">
              </div>
            </div>
            <div class="fc">
              <div class="title" v-html="item.product.name"></div>
              <div class="price">¥{{item.product.price}} <span class="text">（心理预期售卖价格）</span></div>
            </div>
          </div>



          <div class="contacts clearFix">
            <div class="fl">订单编号：{{item.id}}</div>

            <span class="service fr" @click="msgBox(item.product_id)">更改快递单号</span>

          </div>

        </div>

      </div>

    </div>

    <div class="no-result" v-if="!haveList">
      <div class="no">
        <img src="../../assets/search/a5.png" alt="" />
      </div>
      <div class="no-text">没有相关信息</div>
    </div>
  </div>


</template>

<script>
  import { Toast } from 'mint-ui';
  import { MessageBox } from 'mint-ui';


  export default {
    name: 'saleDeliver',
    data () {
      return {
        orderList:[],
        haveList:false,
        logo: 'this.src="' + require('../../assets/default.png') + '"'
      }
    },
    mounted:function(){

      this.initData()

    },

    methods:{
      gotoAddress(path){
        this.$router.push(path)
      },

      initData:function(){

        var _this = this;
        var ajaxData = {};
        ajaxData.pn = 1;
        ajaxData.state = 7;
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
        setTimeout(function(){
          $.ajax({
            type:'post',
            url: RouteMap.consignmentGetList,
            data:ajaxData,
            success:function(res){
              if(res.code == 200){

                if(utilities.isNull(res.data)){
                  return;
                }
                if(utilities.isNull(res.data.list)){
                  return;
                }

                _this.orderList = res.data.list;

//                res.data.list = [];
                if(res.data.list.length>0){
                  _this.haveList = true;
                }


              }
              else{
                //Toast(res.msg)
              }
            }
          })
        })
      },


      msgBox:function(product_id){

        var _this = this;
        MessageBox.prompt('默认顺丰快递','可更改快递单号').then(function(json){
//          console.log(json.value);

          if(json.value == '' || json.value == null){

            Toast('订单号不能为空');
            return;
          }
          if(json.action == 'confirm'){

            //consignmentAdd
            var ajaxData = {};
            ajaxData.express_no = json.value;
            ajaxData.product_id = product_id;
            ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
            setTimeout(function(){
              $.ajax({
                type:'post',
                url: RouteMap.consignmentAdd,
                data:ajaxData,
                success:function(res){
                  if(res.code == 200){

                    _this.initData();
                    Toast('更新单号成功');

                  }
                  else{
                    Toast(res.msg)
                  }
                }
              })
            })


          }





        })
      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .allorder{}
  .order-tt{
    font-size: 0;
    border-bottom: 1px solid #f2f2f2;
    color: #6f6f6f;
  }
  .order-tt .li{
    font-size: 0.6rem;
    display: inline-block;
    width: 20%;
    text-align: center;
    padding: 0.5rem 0;
  }
  .order-tt .li.active{
    border-bottom: 1px solid #b81d23;
    position: relative;
    bottom:-1px;
    color: #b61f21;

  }
  .shenhe-tt{
    border-top:.4rem solid #f3f3f3;
    padding:0 .44rem;
    display:flex;
    justify-content:space-around;
  }

  .contacts .fl{
    line-height: 2rem;
  }
  .contacts .service{
    margin-top: .4rem;
    border-radius: .55rem;
    border:1px solid #FF7B80;
    padding:.2rem 1rem;
    color:#FF7B80;
  }


  .list{
    padding: 0 0.5rem;
    color: #717171;
    font-size: 0.5rem;
    border-bottom: solid #f3f3f3 .4rem;
  }
  .list-tt{
    /*padding: 0.5rem 0;*/
    line-height: 1.2rem;
  }
  .list-tt .right{ float: right}
  .product{
    background: #f3f3f3;
    padding: 0.5rem;
  }
  .product .fl{
    width: 3rem;
  }
  .product .fl img{
    width: 3rem;
  }
  .product .fc{
    width: 10rem;
    word-break: break-all;
    word-wrap: break-word;
    margin-left: 0.5rem;

  }
  .product .fc .title{
    color:#707070;
    line-height: .74rem;
  }
  .product .fc .price {
    font-size: .74rem;
    color:#4D4D4D;
    padding-top: .6rem;

  }
  .product .price .text{
    color: #868686;
    font-size:.34rem;
  }
  .paymoney{
    text-align: right;
    padding: 0.5rem;
    border-bottom: 1px solid #f2f2f2;
  }
  .edit-box{
    text-align: right;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f2f2f2;
  }
  .edit-box span{
    display: inline-block;
    padding: 0.2rem 1rem;
    border-radius: 3rem;
    border: 1px solid #ff7b80;
    color: #ff7b80;
  }
  .edit-box .pay{
    background:#ff7b80;
    color: #fff;

  }
  .no-result{
    text-align: center;
    color: #dedede;
    font-size: 0.5rem;
    padding: 6rem 0;
  }
  .no-result .no img{
    width: 2rem;
    padding-bottom: .5rem;
  }
</style>
